<template>
  <div class="rule-box">
    <home-menu></home-menu>
    <div class="home-btn">
      <img class="home-btn-img" id="id" src="static/imgs/home-btn.png" @click="topBtn(id)"/>
    </div>
    <div class="rule-top">
      <router-link to="/" class="rule-top-link">法治周末普法网 </router-link> >
      <router-link to="/search" class="rule-top-link">法治要闻 </router-link> >
    </div>
    <h3 class="rule-h3">
      {{ruleNews.title}}
      <!--开设“法治讲坛” 推进法治化进程-->
    </h3>
    <div class="rule-time">
      <p class="rule-time-p">
        <span class="time-p-span">时间:</span><label class="time-p-laber">{{ruleNews.time}}</label>
        <span class="time-p-span">来源:</span><label class="time-p-laber">{{ruleNews.laiyuan}}</label>
        <span class="time-p-span">作者:</span><label class="time-p-laber">{{ruleNews.author}}</label>
        <span class="time-p-span">点击:</span><label class="time-p-laber">162</label>次
      </p>
    </div>
    <div class="rule-center">
      <img class="rule-center-img" :src="ruleNews.image"/>
      <p class="rule-center-p" v-for="(item,index) in ruleNews.content" v-html="item">{{item}}</p>
      <p class="rule-center-p">(责任编辑：{{ruleNews.author}})</p>
    </div>
    <div class="rule-footer">
      <ul class="rule-foot-ul">
        <li class="rule-foot-li">
          <p class="rule-li-p">上一篇:没有了</p>
        </li>
        <li class="rule-foot-li">
          <p class="rule-li-p">下一篇:<router-link :to="{path:'/ruleLaw',query:{str:' “法治讲坛”举办首场讲座'}}" class="rule-p-link" @click.native="shuaxin"> “法治讲坛”举办首场讲座</router-link></p>
        </li>
      </ul>
    </div>
     <copy-right></copy-right>
  </div>
</template>

<script>
  import copyRight from '@/pages/common/copyright'
  import data from 'static/data.json'
  import homeMenu from '@/pages/home/menu'
    export default {
        name: "ruleLaw",
        data(){
            return {
              title:'',
              ruleNews:data.ruleNews,
              id:1
            }
        },
        methods:{
          shuaxin:function(){
            this.$router.go(0)
          },

          topBtn(i){
            i++;
            this.id = i;
            if(i%2 == 0){
              document.querySelector(".home-menu").style.display="block";
              document.querySelector(".home-btn").style.zIndex = "1000";
              document.querySelector(".home-btn").style.background="transparent";
            }else{
              document.querySelector(".home-menu").style.display="none";
              document.querySelector(".home-btn").style.background="rgba(0, 0, 0, 0.3835)";
            }
          }

        },
      components: {
        copyRight,
        homeMenu
      },
      created(){
        this.title = this.$route.query.id
        console.log(this.title)
      },
      mounted(){

        this.title = this.$route.query.id
        this.ruleNews = this.ruleNews[this.title]
        console.log(this.ruleNews)
      }
    }
</script>

<style scoped lang="scss">
.rule-box{
  max-width:750px;
  margin: 0 auto;
  background:white;
  padding-top:3rem;

  .home-btn{
    z-index: 100;
    width:100%;
    height:3rem;
    background:rgba(0,0,0,0.3835);
    max-width:750px;
    margin: 0 auto;
    position: fixed;
    left:0;
    right:0;
    top:0;
    z-index: 1000;
    img{
      display: flex;
      width:1.6rem;
      height:1.2rem;
      float:right;
      padding-top: 0.7rem;
      padding-right: 1rem;
    }
  }
  .rule-top{
    padding:1.6rem 1rem 1rem 1rem;
    display:flex;
    align-items: center;
    font-size: 1.6rem;
    color:black;
    line-height: 1;
    .rule-top-link{
      display: block;
      font-size: 1.6rem;
      color: #0e90d2;
      line-height: 1.6rem;
    }
  }
  .rule-h3{
    font-size: 2.8rem;
    color:black;
    line-height:1.5;
    font-weight: 100;
    padding:0 1rem 2rem 1rem;
    /*width:100%;*/
    padding-bottom: 2rem;
    margin: .5rem 0 1rem 0;
  }
  .rule-time{
    margin: .5rem 0 1rem 1.8rem;
    p{
      display: flex;
      align-items: center;
      font-size: 1.2rem;
        color:black;
        line-height: 1;
      .time-p-span{
        display: block;
        font-size: 1.2rem;
        color:black;
        line-height: 1;
        margin-left:1.5rem;
      }
      .time-p-span:first-child{
        margin-left:.5rem;
      }
      .time-p-laber{
        display: block;
        font-size: 1.2rem;
        color:black;
        line-height: 1;
        font-weight: 800;
      }
    }
  }
  .rule-center{
    padding: 1rem;
    .rule-center-img{
      display: block;
      width:100%;
      margin-bottom: 2rem;
    }
    .rule-center-p{
      font-size: 1.6rem;
      color:black;
      line-height: 1.6;
      padding:0 .5rem;
      margin: 0 0 1.6rem 0;
      text-indent: 3.2rem;
      img{
        display: block;
        width:100%;
      }
    }
  }
  .rule-footer{

    padding: 3rem 1rem;
    .rule-foot-ul{
      margin:1.6rem 0;
      padding-left: 2rem;
      list-style-type: disc!important;

      .rule-foot-li{
        .rule-li-p{
          display: flex;
          align-items: flex-start;
          font-size: 1.6rem;
          color:black;
          line-height: 1.6;
          .rule-p-link{

            font-size: 1.6rem;
            line-height: 1.6;
            display: block;
            color: #0e90d2;
            width: 80%;
          }
        }
      }
    }

  }
  .copyright{
    padding-bottom:2.6rem;
    padding-top:1rem;
  }
}
</style>
